<template>
    <div class="daohang">
        <el-menu 
            
            :default-active="currentPath"       
            text-color="#666"
            active-text-color="#fff"
            router
            class="el-menu-vertical-demo">

       
            <el-menu-item index="/zspt/Page11Vue"  class="daohangitem"><template #title>

                    <span>种植地列表</span>
                </template></el-menu-item>
            <el-menu-item index="/zspt/Page12Vue"  class="daohangitem"><template #title>

                    <span>农产品列表</span>
                </template>
            </el-menu-item>
 <el-menu-item index="/zspt/Page3Vue" class="daohangitem">
                <template #title>
                    <span>种植管理</span>
                </template>
            </el-menu-item>
            <div class="vertical-line-group">
                <el-menu-item index="/zspt/Page1Vue" class="daohangitem">
                    <template #title>
                
                        <span>种植地登记</span>
                    </template>
                </el-menu-item>
            
                <el-menu-item index="/zspt/Page2Vue" class="daohangitem">
                    <template #title>
                        <span>作物登记</span>
                    </template>
                </el-menu-item>

                 <el-menu-item index="/zspt/AddProduct" class="daohangitem">
                    <template #title>
                        <span>农产品登记</span>
                    </template>
                </el-menu-item>
            </div>
           

        </el-menu>
    </div>
</template>

<script setup>
const props = defineProps({
    currentPath: {
        type: String,
        required: true
    }
});
</script>

<style scoped>
.daohang{
    padding: 20px 0 20px 20px;
}

.daohangitem{
    width: 150px;
    border-radius: 10px;
    font-size: 20px;
    margin: 10px 0;
}
.daohangitem.is-active {
  /* 选中状态的背景色 */
  background-color: #2e7d32 !important; /* 蓝色背景，可自定义 */
  
}
.daohangitem:hover:not(.is-active) {
  background-color: #2e7d32;
    color: white;
}
.el-menu-vertical-demo{
    min-height: 100vh;
    width: 200px;
}
.vertical-line-group {
    border-left: 2px solid #2e7d32; /* 与导航激活色保持一致 */
    padding-left: 10px;
    margin-left: 5px;
}


/* 子菜单标题样式 */
:deep( .daohangitem .el-sub-menu__title) {
  width: 190px !important;
  border-radius: 10px !important;
  font-size: 20px !important;
}

/* 子菜单标题鼠标经过样式 */
:deep(.daohangitem .el-sub-menu__title:hover)  {
  background-color: #2e7d32 !important;
  color: white !important;
}

/* 子菜单有选中项时标题样式 */
:deep(.daohangitem.is-active .el-sub-menu__title)  {
  background-color: #2e7d32 !important;
  color: white !important;
}

/* 确保标题内的span元素继承样式 */
:deep(.daohangitem .el-sub-menu__title span)  {
  color: inherit !important;
}
</style>